<template>
	<div class="box">
		<div>
			<div class="cardTitle">
				<view class="myCard">
					我的卡（{{total}}张）
				</view>
				<view class="addCard" @click="navigateTo('/pages/promotion/cardList/add?name='+title)">
					+添加银行卡
				</view>
			</div>
			<div class="cardUl">
				<view v-for="(itemLi,index) in cardList" :key="index" class="cardLi" @click="navigateTo('/pages/promotion/cardList/add?name='+editTitle+'&memberId='+itemLi.id)">
					<bank-item :bankCode="itemLi.bankCode" :bankName="itemLi.bankName" :cardCode="itemLi.cardNumber"></bank-item>
				</view>
			</div>
		</div>
	</div>
</template>

<script>
	import BIN from "bankcardinfo"
	import * as API_CARD from "@/api/card";
	export default {
		data() {
			return {
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				total: '',
				cardList: [],
				title: "添加银行卡",
				editTitle: '修改银行卡信息'
			}
		},
		onShow() {
			this.cardList=[]
			this.getCardListMTH()
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url,
				});
			},
			getCardListMTH() {
				uni.showLoading({
					title: "加载中",
				});
				let that=this;
				API_CARD.getCardList().then(res => {
					if (res.data.code == 200) {
						uni.hideLoading()
						that.total = res.data.result.total;
						let dataList = res.data.result.records;
						res.data.result.records.forEach((item, index) => {
							// 6214680080291816
							BIN.getBankBin(item.cardNumber)
								.then(function(data) {
									dataList[index] = Object.assign(dataList[index], data)								
									that.cardList.push(dataList[index])
								})
								.catch(function(err) {
									console.log(err)
								})
						});
						
					}else{
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			onClick(e) {
				//点击选项按钮时触发事件	
				//e = {content,index} ，content（点击内容）、index（下标）、position (位置信息)
			},
			swipeChange(e) {
				//组件打开或关闭时触发	
				// left:左侧 ，right：右侧，none：关闭
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.cardTitle {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;

		.addCard {
			padding: 6rpx 20rpx;
			box-sizing: border-box;
			border-radius: 25rpx;
			color: #fff;
			background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
		}
	}

	.cardUl {
		margin-top: 15rpx;

		.cardLi {
			// color: #fff;
			// height: 240rpx;
			width: 100%;
			border-radius: 20rpx;
			margin-top: 15rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.cardIcon {
				display: flex;
				align-items: center;

				image {
					// height: 80rpx;
					// width: 80rpx;
					height: 130rpx;
					width: 400rpx;
					margin-right: 30rpx;
				}

				font-size: 36rpx;
			}

			.cardCode {
				// margin-top: 55rpx;
				margin-top: 100rpx;
				width: 100%;
				text-align: right;
				color: #000000;
				font-size: 26rpx;
			}
		}
	}
</style>
